<template>
  <Card title="会员年龄分布" :loading="loading" hoverable>
    <template #extra>
      <div class="extra-item">
        <a-radio-group size="default">
          <a-radio-button value="large">性别</a-radio-button>
          <a-radio-button value="default">年龄</a-radio-button>
        </a-radio-group>
      </div>
    </template>
    <div ref="chartRef" :style="{ width, height }"></div>
  </Card>
</template>
<script lang="ts" setup>
import {onMounted, Ref, ref, watch} from 'vue'
import {Card} from 'ant-design-vue'
import {useECharts} from '@/hooks/web/use-echarts'

const chartRef = ref<HTMLDivElement | null>(null)
import {useDataSource} from "@/hooks/web/use-echarts/useDataSource";

const {setOptions} = useECharts(chartRef as Ref<HTMLDivElement>)
const props = defineProps({
  loading: Boolean,
  width: {
    type: String as PropType<string>,
    default: '100%',
  },
  height: {
    type: String as PropType<string>,
    default: '350px',
  },
})
const equipment = ['20岁-40岁', '30岁-40岁', '40岁-50岁', '未知'];
const colorList = ['#F8BA4F', '#2DB4FF', '#2F4056', '#F8BA4F', '#F8BA4F', '#2F4056']
const colorList2 = ['#F8BA4F', '#2F4056', '#F8BA4F', '#2F4056', '#F8BA4F', '#2F4056']
let {queryData} = useDataSource(props, initOptions);
const fieldNames =  {
  label:'airportName',
  value:'airportId'
}
/**
 * 初始化
 */
function initOptions(chartData) {
  let option: any = {
    backgroundColor: '#fff',
    tooltip: {
      formatter: function (param) {
        if (param.data.type == null) {

          return param.data.name + ":" + param.value + '%';
        } else {

          return param.data.type + ":" + param.value + '%';
        }
      }
    },

    series: [{
      name: '会员画像',
      type: 'pie',
      radius: [0, '30%'],
      label: {
        position: 'inner',

      },
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 2,
        color: function (params) {
          return colorList[params.dataIndex]
        }
      },
      selectedMode: 'single',
      data: [{
        value: 70,
        name: '男性',

      },
        {
          value: 30,
          name: '女性',

        },
        {
          value: 10,
          name: '未知',

        },
      ]
    },
      {
        name: '性别分布',
        type: 'pie',
        radius: ['40%', '55%'],

        itemStyle: {

          color: function (params) {
            return colorList2[params.dataIndex]
          }

        },
        label: {
          formatter: function (params) {

            if (params.value != 0)
              return params.data.type + ":" + params.value + '%';
            else
              return '';
          },
          show: true,

        },

        data: [{
          value: 35,
          name: '年龄',
          type: equipment[0],

        },
          {
            value: 25,
            name: '年龄',
            type: equipment[1],

          },
          {
            value: 10,
            name: '年龄',
            type: equipment[2],

          },
          {
            value: 10,
            name: '年龄',
            type: equipment[3],

          }

        ]
      }
    ]
  }
  setOptions(option);
}


function initData(params) {
  queryData({
    url: "adminTotal/ageProportion",
    params
  });
}

watch(
    () => props.loading,
    () => {
      if (props.loading) {
        return
      }
      initData({})
    },
    {immediate: true},
)

</script>
